<template>
  <div class="rednest" >
    <el-row :gutter="1">
      <el-col :span="24">
        <ul class="headerUl">
          <li v-for="(headerUlItem,index) in headerUl" :key="index"
              @click="changeCssEvent(index)"
              v-bind:class="{'headerUlBackground':flag==index}">
            {{headerUlItem.content}}
          </li>
        </ul>
      </el-col>
      <el-col :span="18">
        <ul class="topicContentUl" style="margin: 0px;padding: 0px">
          <li v-for="(technologyItem,index) in technologyContent" :key="index">
            <div class="grid-content bg-purple">
              <h2>{{technologyItem.title}}</h2>
              <p>{{technologyItem.content}}</p>
              <p class="authors">
                <img :src='technologyItem.url'>
                <span class="author">{{technologyItem.author}}</span>
                <span>{{technologyItem.time}}</span>
                <router-link to="/technologyDetails" class="discuss">评论</router-link>
                <span class="discuss" style="color: red;padding: 4px 10px 4px 2px">{{like}}</span>
                <span class="discuss">赞</span>
              </p>
            </div>
          </li>
        </ul>
        <div style="clear:both;"></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="newsSidebar">
            <p>今日推荐</p>
            <ul class="newsSidebarUl">
              <li v-for="technologyItem in technologySecommend" :key="technologyItem.url">
                <span>{{technologyItem.url}}</span>
              </li>
            </ul>
          </div>
          <div style="clear:both;"></div>
        </div>
        <div class="grid-content bg-purple">
          <div class="newsSidebar">
            <p>技术大牛</p>
            <ul class="newsSidebarUl">
              <li v-for="(technologyItem,index) in technologySuperhuman" :key="index">
                <div>
                  <img :src='technologyItem.img'>
                  <span>{{technologyItem.author}}</span>
                  <span>{{technologyItem.job}}</span>
                </div>
                <span>{{technologyItem.motto}}</span>
              </li>
            </ul>
          </div>
          <div style="clear:both;"></div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
    export default {
      name: "technology",
      data(){
        return{
          flag:-1,
          headerUl:[
            {content:'推荐'},
            {content:'html'},
            {content:'css'},
            {content:'javaScript'},
            {content:'vue'},
            {content:'Bootstarp'},
            {content:'jQuery'},
            {content:'ssm'},
            {content:'ssh'},
            {content:'springboot'},
          ],
          technologyContent:[],
          technologySecommend:[
            {url:'推荐1'},
            {url:'推荐2'}
          ],
          technologySuperhuman:[
            {
              img:'img',
              author:'author',
              job:'job',
              motto:'motto'
            },
            {
              img:'img',
              author:'author',
              job:'job',
              motto:'motto'
            }
          ],
          //点赞
          like:0,
        }
      },
      methods:{
        getTechnologyContent(){
          this.list = [];
          for(let i = 1 ;i <11 ;i ++){
            let list = [ {
              title:'titletitletitletitletitletitleti' +
                'tletitletitletitletitletitletitleti' +
                'tletitletitletitletitletitletitleti' +
                'tletitletitletitletitletitletitleti' +
                'tletitletitletitletitle',
              content:'contentcontentcontentcontent' +
                'contentcontentcontentcontentcontentco' +
                'ntentcontentcontentcontentcontentcont' +
                'entcontentcontentcontentcontentconte' +
                'ntcontentcontentcontentcontent',
              url:'url',
              author:'author',
              time:'time',
            },];
            this.technologyContent=this.technologyContent.concat(list)
          }
        },
       //更改样式
        changeCssEvent:function (index) {
          this.flag = index;
        }
        //需要加一个头部样式监听

      },
      created () {
        this.getTechnologyContent();
      },
    }
</script>

<style scoped>
  .headerUlBackground{
    border-bottom: 2px solid red;
  }
.headerUl{
  display: inline-block;
  list-style: none;
  float: left;
  width: 100%;
  background-color: white;
  box-shadow: 0px 1px 2px rgba(193, 182, 165, 0.73);
  margin: 0px;

}



</style>
